<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" href="../css/vant.css">
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #f7f7f7;
    }

    .KSY {
        background-color: #5cd749 !important;
        color: #fff;
    }

    .YGQ {
        background-color: #aaaaa4 !important;
    }

    .YSY {
        background-color: #4182ce !important;
    }

    .topTitle {
        width: 94%;
        padding: 0 3% 0.5rem 3%;
        font-size: 0.8rem;
    }

    .topTitle p {
        padding-top: 0.5rem;
    }

    .topTitle .id span {
        padding: 0.1rem 0.3rem;
        border-radius: .3rem;
        border: 1px solid #fff;
        color: #fff;
    }

    .topTitle .starus {
        font-weight: bold;
    }

    .topTitle span {
        font-size: 0.6rem;
        font-weight: normal;
    }

    .detail {
        width: 100%;
        padding: 1rem 0;
    }

    .detail .title {
        text-align: center;
        font-size: 1rem;
    }

    .detail .tip {
        float: right;
        width: 2.5rem;
        padding: 0.2rem;
        font-size: 0.8rem;
        border: 1px solid #ccc;
        border-radius: 0.5rem;
        background-color: #ededf0;
        margin-top: -1rem;
        margin-right: 1rem;
    }

    .detail .info {
        margin-top: 2rem;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 0.7rem;
    }

    .detail .info .info_item {
        width: 33%;
        text-align: center;
        margin-top: 0.5rem;
    }

    .zhenduan {
        width: 100%;
        padding-bottom: 1rem;
    }

    .zhenduan p {
        margin-top: 0.5rem;
        font-size: 0.8rem;
    }

    .zhenduan .title {
        line-height: 2rem;
        font-size: 0.9rem;
        border-bottom: 1px solid #ccc;
    }

    .zhenduan p span {
        margin-left: 0.5rem;
    }

    .kaifang {
        width: 100%;
        font-size: 0.8rem;
        padding-bottom: 0.5rem;
    }

    .kaifang .title {
        padding: 0.5rem 0;
        border-bottom: 1px solid #ccc;
    }

    .kaifang .title span {
        margin: 0 0.5rem;
        font-weight: bold;
    }

    .kaifang .yaofang_detail {
        padding: 0.5rem 0;
        margin: 0 3%;
        width: 94%;
        height: 2rem;
        border-bottom: 1px dashed #ccc;
    }

    .kaifang .yaofang_detail img {
        width: 2rem;
        height: 2rem;
    }

    .kaifang .yaofang_detail span {
        margin: 0 0.5rem;
    }

    .kaifang .total {
        width: 94%;
        margin: 0 3%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding-bottom: 0.5rem;
        border-bottom: 1px dashed #ccc;
    }

    .kaifang .total .item {
        width: 50%;
        margin-top: 0.5rem;
    }

    .using {
        width: 94%;
        margin: 0.5rem 3% 0 3%;
    }

    .ways {
        width: 94%;
        margin: 0.5rem 3% 0 3%;
    }

    .yizhu {
        width: 94%;
        margin: 0.5rem 3% 0 3%;
    }

    .qianzi {
        width: 94%;
        margin: 0.5rem 3%;
        height: 3rem;
    }

    .qianzi .title {
        font-size: 0.9rem;
        font-weight: bold;
    }

    .qianzi .detail {
        margin-top: -0.5rem;
        font-size: 0.8rem;
    }

    .qianzi .qianzhang {
        float: right;
        height: 3rem;
        width: 3rem;
        margin-right: 1rem;
        border-radius: 50%;
        text-align: center;
        line-height: 3rem;
        border: 1px solid #ccc;
        color: #ccc;
        font-size: 0.7rem;
    }

    .submit {
        width: 10rem;
        height: 1.5rem;
        text-align: center;
        line-height: 1.5rem;
        font-size: 0.8rem;
        border-radius: 5rem;
        color: #fff;
        background-color: #294ac2;
        margin: 1rem auto;
    }
</style>

<body>
    <div id="app">
        <div class="topTitle KSY" v-if="prescribes.isUse == 0">
            <p class="id">处方审核已通过</p>
            <p class="starus">患者可使用处方进行购药</p>
        </div>
        <div class="topTitle YSY" v-if="prescribes.isUse == 1">
            <p class="id">处方已使用</p>
            <!-- <p class="starus">处方已使用</p> -->
        </div>
        <div class="topTitle YGQ" v-if="prescribes.isUse == 2">
            <p class="id">处方已过期</p>
            <!-- <p class="starus">处方已过期</p> -->
        </div>
        <div class="detail">
            <p class="title">祥愿堂处方笺</p>
            <span class="tip">普通药品处方</span>
            <div class="info">
                <div class="info_item">姓名:{{prescribes.userName || "-"}}</div>
                <div class="info_item">性别:
                    <span v-if="prescribes.sex == 1">男</span>
                    <span v-else-if="prescribes.sex == 2">女</span>
                    <span v-else>-</span>
                </div>
                <div class="info_item">年龄:{{prescribes.age || 0}}</div>
                <div class="info_item">科室:{{prescribes.department|| "-"}}</div>
                <div class="info_item">日期:{{prescribes.createTime|| "-"}}</div>
            </div>


        </div>
        <div class="placeholder_div"></div>
        <div class="zhenduan">
            <p class="title"><span>诊断</span></p>
            <p><span>辨病</span> <span>{{prescribes.diseases}}</span></p>
            <p><span>辩证</span> <span>{{prescribes.dialectical}}</span></p>
        </div>
        <div class="placeholder_div"></div>
        <div class="kaifang">
            <p class="title"><span>开方</span> (处方购药前可见)</p>
            <div class="yaofang_detail">
                <img :src="prescribes.storeLogo ? prescribes.storeLogo : '../../image/user_avater.png'" class="avatar"
                    alt="">
                <span>江西康仁堂</span>
                <span>{{prescribes.dosageForm}}(共{{length}}味药材)</span>
            </div>
            <div class="total">
                <div class="item" v-for="item in prescribes.prescribeDrugs">{{item.name}} {{item.quantity}}{{item.unit}}
                </div>
            </div>
            <div class="using">用药方法：
                <span v-if="prescribes.administrationRoute == 1">内服</span>
                <span v-if="prescribes.administrationRoute == 2">外用</span>
            </div>

            <div class="ways">用法：共{{prescribes.quantity}}帖，每日{{prescribes.dailyDose}}贴，1贴分{{prescribes.frequency}}次服用
            </div>
            <div class="yizhu">医嘱：{{prescribes.medicalAdvice}}</div>
        </div>
        <div class="placeholder_div"></div>

        <div class="qianzi">
            <div class="qianzhang">
                签章
            </div>
            <p class="title">签字盖章</p>
            <p class="detail">医生：{{prescribes.doctorName}}</p>
        </div>
        <div class="placeholder_div"></div>
        <div class="submit">撤回处方</div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script src="../script/vant.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        init();
    }
    //使用vue对数据进行绑定
    function init() {
        var app = new Vue({
            el: '#app',
            data: {
                prescribes: {},
                length: 0,
            },
            created: function () {
                this.getPresciptions(api.pageParam.id);
                if (!this.prescribes) {
                    toast("处方丢失啦")
                    api.closeWin();
                }
            },
            methods: {
                getPresciptions: function (id) {
                    var $this = this;
                    get_ajax("portal/prescribe/detail", {
                        id: id
                    }, function (res, err) {
                        // alert(JSON.stringify(res))
                        // alert(JSON.stringify(err))
                        if (res.data == null) {
                            alert("未找到处方详情")
                            api.closeWin()
                            return false
                        }
                        if (res.code == 2000 && res.data) {
                            $this.prescribes = res.data;
                            $this.length = res.data.prescribeDrugs.length
                        }
                    })
                }, //end
                copy() {
                    var clipBoard = api.require('clipBoard');
                    clipBoard.set({
                        value: app.prescribes.id
                    }, function (ret, err) {
                        if (ret) {
                            toast('订单号复制成功')
                        } else {
                            //alert(JSON.stringify(err));
                        }
                    });
                }
            }, //endmethods

        })
    }
</script>